<form action="<?php echo base_url();?>user/ujian/submit_ujian"
	method="post" id="submit-quiz">
	<input type="hidden" name="uj_id" value="<?php echo $uj_id;?>" />
	<?php
	$no = 1;
	foreach ($ujian as $row){
?>
	<input type="hidden" name="soal[]" value="<?php echo $row['pertanyaan']->so_id;?>" />
	<div id="soal<?php echo $no;?>" class="portlet-body">
		<div class="row-fluid">
			<div class="soal-btn span12">
				<div class="btn yellow">
					<?php echo $no;?>
				</div>
				<div class="clearfix"></div>
				<!-- kalo gambar ada div ini dibuka kalo gambar ga ada ditutup aja-->
				<?php if($row['pertanyaan']->so_pict){?>
				<div class="control-group">
					<div class="controls">
						<div class="fileupload fileupload-new" data-provides="fileupload">
							<div class="fileupload-new thumbnail"
								style="width: 200px; height: 150px;">
								<!-- naro sources gambarnya disini-->
								<img
									src="<?php echo base_url();?>images/uploaded/<?php echo $row['pertanyaan']->so_pict;?>"
									alt="" />
							</div>
							<div class="fileupload-preview fileupload-exists thumbnail"
								style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
						</div>
					</div>
				</div>
				<?php }?>
				<h4>
					<?php echo $row['pertanyaan']->so_desc;?>
				</h4>

				<div class="control-group">
					<div class="controls">
						<?php foreach ($row['jawaban'] as $jawaban){ ?>
						<label class="radio line"> <input type="radio"
							name="jawaban<?php echo $row['pertanyaan']->so_id;?>"
							value="<?php echo $jawaban->ja_id.'|'.$jawaban->ja_stat;?>"
							onclick="check('jawaban<?php echo $row['pertanyaan']->so_id;?>','<?php echo $no;?>')" />
							<?php echo $jawaban->ja_desc;?>
						</label>
						<?php }?>
					</div>
				</div>
			</div>
		</div>
	</div>
	<?php
	$no++;
	}
	?>

	<div class="informasiujian-box" align="center">
		<div class="scrollingTable hidden-phone">
			<table class="table table-striped table-hover" id="myTable">
				<thead>
					<tr>
						<th>Soal</th>
						<th>Status</th>
					</tr>
				</thead>
				<tbody>
					<?php for($n=1;$n<$no;$n++){?>
					<tr>
						<td><a href="#soal<?php echo $n;?>">Soal <?php echo $n;?>
						</a>
						</td>
						<td></td>
					</tr>
					<?php }?>
				</tbody>
			</table>

		</div>

		<h4 id="timer-ujian">Waktu 00:00:00</h4>
		<button type="submit" class="btn blue" id="submit-ujian">Submit</button>
	</div>
</form>

<script type="text/javascript">
var interval;
var hours = 0;
var minutes = 0;
var seconds = 0;

window.onbeforeunload = function() {
    return null;
}

$('#submit-ujian').live('click', function(){
	var answer = confirm("Harap periksa kembali jawaban anda, anda sudah yakin?");
	if(answer) submit_ujian();
});

$('#submit-quiz').submit(function() {
	return false;
});

function init_date(){
	var now = new Date();
	var end = new Date('<?php echo date("F d, Y H:i:s", strtotime($end_time));?>');
	var diff = new Date(end - now);
	seconds = Math.floor((diff / 1000) % 60);
	minutes = Math.floor((diff / (1000*60)) % 60);
	hours   = Math.floor((diff / (1000*60*60)) % 24);
}

        function makeTableScroll() {
            // Constant retrieved from server-side via JSP
            var maxRows = 4;
            var table = document.getElementById('myTable');
            var wrapper = table.parentNode;
            var rowsInTable = table.rows.length;
            var height = 0;
            if (rowsInTable > maxRows) {
                for (var i = 0; i < maxRows; i++) {
                    height += table.rows[i].clientHeight;
                }
                wrapper.style.height = height + "px";
            }
        }

window.onload = function() {
	init_date();
	 makeTableScroll() ;
    countdown('timer-ujian');
};
function countdown(element) {
    interval = setInterval(function() {
        var el = document.getElementById(element);
        if(seconds < 0) {
            if(minutes == 0) {
                if(hours == 0){
                    alert("Waktu Habis");
                	submit_ujian();
                	clearInterval(interval);
                	return;
                } else {
                    hours--;
                    minutes = 59;
                    seconds = 59;
                }
            } else {
                minutes--;
                seconds = 59;
            }
        }
        if(seconds == 0 && minutes == 10 && hours == 0) toastr.info('Waktu 10 menit lagi!');
        if(seconds < 10) {
            var second_text = '0'+seconds;
        } else {
            var second_text = seconds;
        }
        if(minutes < 10) {
            var minute_text = '0'+minutes;
        } else {
            var minute_text = minutes;
        }
        if(hours < 10) {
            var hours_text = '0'+hours;
        } else {
            var hours_text = hours;
        }
        el.innerHTML = 'Waktu '+hours_text + ':' + minute_text + ':' + second_text;
        seconds--;
    }, 1000);
}

function submit_ujian(){
	$.post('<?php echo base_url();?>user/ujian/submit_ujian', $('#submit-quiz').serialize())
		.done(function(data){
			window.location.href = "<?php echo base_url();?>user/ujian/show_result/"+data;
		})
		.fail(function(data){
			alert("Submit soal gagal");
	});
}

function check(name, no){
    var radios = document.getElementsByName(name);
	var myTable = document.getElementById('myTable');

     for (var i = 0, len = radios.length; i < len; i++) {
          if (radios[i].checked) {

			myTable.rows[no].cells[1].innerHTML = '<span class="label label-success">Terisi</span>';
            return true;
          }
     }
	myTable.rows[no].cells[1].innerHTML = '';
    return false;
 }
</script>





